import React, { ReactElement, useContext } from 'react';
import { View, Text, Image } from 'react-native';
import Button from '../../../../components/Button';
import DashLine from '../../../../components/DashLine';
import { payBackground } from '../../../../constant/resource';

import styles from './style';
import { Store } from '../../reducer';
import { OrderResultStatus } from '../../constant';
import navigator from '../../../../util/navigator';
import { startCourse } from '../../actions';
import { pointToYuan } from '../../../../util/transformMoney';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { orderInfo } = state;
  const {
    orderId,
    payAmount = 0,
    payTime,
    productList = [],
    status
  } = orderInfo;
  return (
    <View style={styles.container}>
      {status === OrderResultStatus.PaySuccess && (
        <View style={styles.content}>
          <Image source={payBackground} style={styles.background} />
          <Text style={styles.price}>
            <Text style={styles.unit}>¥</Text>
            {pointToYuan(payAmount)}
          </Text>
          <Text style={styles.orderNumber}>订单号：{orderId}</Text>
          <Text style={styles.time}>支付时间：{payTime}</Text>
          <DashLine
            style={styles.dash}
            length={25}
            dashStyle={styles.dashItem}
          />
          {productList.map(
            (item): ReactElement => (
              <Text style={styles.courseName}>{item.name}</Text>
            )
          )}
        </View>
      )}

      {status === OrderResultStatus.PayFail && (
        <Text
          style={styles.failDetail}
        >{`支付时发生错误${'\n'}请重新支付`}</Text>
      )}

      {status === OrderResultStatus.PaySuccess && (
        <Button
          style={styles.actionContent}
          text="去上课"
          textStyle={styles.actionDesc}
          onPress={startCourse}
        />
      )}

      {status === OrderResultStatus.PayFail && (
        <Button
          style={[styles.actionContent, styles.failContent]}
          text="支付重试"
          textStyle={[styles.actionDesc, styles.failDesc]}
          onPress={navigator.goBack}
        />
      )}
    </View>
  );
};
